<template>
	<view class="main-container">
		<HeaderBar title="研学之州" :titleColor="titleColor" :navBarBgc="headerBgc" :isFixed="true"></HeaderBar>
		<view class="swiper-container">
			<image class="top-background" lazy-load :class="animationStyle"
				src="http://img.abatour.com/2025-05-05/图层 3 拷贝 2@2x_1746410508557.png" mode="heightFix"></image>
			<image class="top-clod-background" lazy-load :class="clodAnimationStyle"
				src="http://img.abatour.com/2025-05-06/图层 3 拷贝@2x_1746499100042.png" mode="widthFix"></image>
			<!-- <img class="clod-image"
				src="http://img.abatour.com/2025-05-04/云@2x_1746329546560.png" alt=""> -->
			<image class="title-img" src="http://img.abatour.com/2025-05-05/组 9@2x_1746425090206.png" mode="widthFix"
				lazy-load alt=""></image>
		</view>
		<view class="studyBoard-container">
			<wd-tabs v-model="tab" swipeable animated :duration="500" lineWidth="0" lineHeight="0" @change="chageTab">
				<block v-for="(item,index) in studyAboardDataList" :key="item">
					<wd-tab title="">
						<image class="studyBoard-banner-image" @click="gotoList(item)" :src="item.image" mode="widthFix"
							lazy-load></image>

					</wd-tab>
				</block>
			</wd-tabs>
			<view class="danmuBox">
				<imageDanmu ref="danmu" :imagesList="activeDanmu" :duration="6000" @item-click="handleClick" />

			</view>
		</view>
	</view>

</template>

<script setup>
	import {
		ref,
		computed
	} from "vue";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import HeaderBar from "@/components/HeaderBar/index.vue";
	import VlogList from "@/components/Waterfull/index.vue";
	import {
		commonWordList
	} from "@/api/system";
	import imageDanmu from "../components/Danmaku.vue";
	import {
		styleSettingContent
	} from "@/api/system";
	const studyAboardDataList = ref([{
			image: "http://img.abatour.com/2025-05-06/图层 3_1746512315252.png",
			danmuName: "firstDanmu",
			code: "3",
		},
		{
			image: "http://img.abatour.com/2025-05-06/图层 11_1746512495172.png",
			danmuName: "secDanmu",
			code: "4",
		},
		{
			image: "http://img.abatour.com/2025-05-06/图层 5_1746512542196.png",
			danmuName: "thrDanmu",
			code: "2",
		},
	])
	const danmuList = {
		firstDanmu: [
			"http://img.abatour.com/2025-05-06/文字 拷贝 7@2x_1746512815188.png",
			"http://img.abatour.com/2025-05-06/文字 拷贝 8@2x_1746512887729.png",
			"http://img.abatour.com/2025-05-06/文字 拷贝 9@2x_1746512950570.png"
		],
		secDanmu: [
			"http://img.abatour.com/2025-05-06/文字 拷贝 2@2x_1746513145208.png",
			"http://img.abatour.com/2025-05-06/文字 拷贝 3@2x_1746513180648.png",
			"http://img.abatour.com/2025-05-06/文字 拷贝@2x_1746513228979.png"
		],
		thrDanmu: [
			"http://img.abatour.com/2025-05-06/文字 拷贝 5@2x_1746513266652.png",
			"http://img.abatour.com/2025-05-06/文字 拷贝 6@2x_1746513314808.png",
			"http://img.abatour.com/2025-05-06/组 12@2x_1746513358869.png"
		]
	}
	const activeDanmu = ref([
		"http://img.abatour.com/2025-05-06/文字 拷贝 7@2x_1746512815188.png",
		"http://img.abatour.com/2025-05-06/文字 拷贝 8@2x_1746512887729.png",
		"http://img.abatour.com/2025-05-06/文字 拷贝 9@2x_1746512950570.png"
	])
	const danmu = ref()
	const animationStyle = ref('')//背景图动画样式类
	const clodAnimationStyle = ref('')//背景图独立云层的动画样式类
	const tab = ref(0)
	const headerBgc = ref("transparent");
	const titleColor = ref("#2D2D2D");
	const lastSwiper = ref(-1)//上一张图的index，用于判断正向滑动还是反向
	/**
	 * @description 点击查看列表
	 * @author 杨燕娥
	 * @param item
	 */
	const gotoList = (item) => {
		uni.navigateTo({
			url: "/fiveMajorSubPack/pages/studyAboard/articleList?code=" + item.code
		})
	}
	/**
	 * @description 切换底部图片
	 * @author 杨燕娥
	 */
	const chageTab = (e) => {
		activeDanmu.value = danmuList[studyAboardDataList.value[e.index].danmuName]
		danmu.value?.initData(danmuList[studyAboardDataList.value[e.index].danmuName])
		let name = ""
		//正向切换
		if (lastSwiper.value < e.index) {
			if (e.index == 1) {
				animationStyle.value = "backgroundMoveClass1"
				clodAnimationStyle.value = "topClodMoveClass1"
			}
			if (e.index == 2) {
				animationStyle.value = "backgroundMoveClass2"
				clodAnimationStyle.value = "topClodMoveClass2"
			}
		} else {//反向切换
			if (e.index == 1) {
				animationStyle.value = "backgroundMoveClass3"
				clodAnimationStyle.value = "topClodMoveClass3"
			}
			if (e.index == 0) {
				// if(lastSwiper.value==3) animationStyle.value="backgroundMoveClass5"
				// else animationStyle.value="backgroundMoveClass4"
				animationStyle.value = "backgroundMoveClass4"
				clodAnimationStyle.value = "topClodMoveClass4"
			}
		}

		lastSwiper.value = e.index
	}
	onPageScroll((e) => {
		if (e.scrollTop > 110) {
			headerBgc.value = "#ffffff";
			titleColor.value = "#2D2D2D";
		} else {
			headerBgc.value = "transparent";
			titleColor.value = "#2D2D2D";
		}
	})

</script>

<style lang="scss" scoped>
	::v-deep .wd-tabs__nav {
		height: 0px !important;
	}

	::v-deep .wd-tabs {
		background-color: transparent !important;
	}

	::v-deep .wd-tab__body {
		height: 967rpx !important;
	}

	.news-title-container {
		display: flex;
		align-items: center;
		justify-content: space-between;

		image {
			width: 190rpx;
			height: 48rpx;
		}

		.more-container {
			color: #2B2B24;
			display: flex;
			align-items: center;

			text {
				font-size: 30rpx;
			}
		}

	}

	.danmuBox {
		position: absolute;
		top: 200rpx;
	}

	.more-icon-container {
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		width: 25rpx;
		height: 25rpx;
		margin-left: 13rpx;
		text-align: center;
	}

	.hospitable-content-box {
		position: absolute;
		width: 100%;
		top: 796rpx
	}

	.hosoitable_content {
		border-radius: 10rpx;
		box-sizing: border-box;
		width: 100%;
		position: flex;
		flex-direction: column;
		padding: 50rpx 28rpx;
		background-color: #fff;
	}

	.main-container {
		min-height: 100vh;
		background-color: #dfa574;
		overflow-x: hidden;
		position: relative;

		.swiper-container {
			width: 100%;
			height: 762rpx;
			// margin-top: -100rpx;
			position: relative;
			--wot-swiper-radius: 0;

			// background-image: url('http://img.abatour.com/2025-05-05/图层 3 拷贝 2@2x_1746410508557.png');
			// background-position: left center;
			// background-size: cover;
			// background-repeat: no-repeat;
			// animation:backgroundMove 2s 0s linear;
			.top-background {
				position: absolute;
				height: 900rpx;
				top: 0;
				left: 0;
				animation-fill-mode: forwards;
			}

			.top-clod-background {
				position: absolute;
				width: 630rpx;
				top: 220rpx;
				left: 530rpx;
				animation-fill-mode: forwards;
			}
		}

		.backgroundMoveClass1 {
			animation: backgroundMove1 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.backgroundMoveClass2 {
			animation: backgroundMove2 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.backgroundMoveClass3 {
			animation: backgroundMove3 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.backgroundMoveClass4 {
			animation: backgroundMove4 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.backgroundMoveClass5 {
			animation: backgroundMove5 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.topClodMoveClass1 {
			animation: clodMove1 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.topClodMoveClass2 {
			animation: clodMove2 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.topClodMoveClass3 {
			animation: clodMove3 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		.topClodMoveClass4 {
			animation: clodMove4 0.5s 0s cubic-bezier(0.4, 0, 0.3, 1) forwards;
		}

		@keyframes backgroundMove1 {
			0% {
				transform: translateX(0rpx);
			}

			100% {
				transform: translateX(-150rpx);
			}
		}

		@keyframes backgroundMove2 {
			0% {
				transform: translateX(-150rpx);
			}

			100% {
				transform: translateX(-300rpx);
			}
		}

		@keyframes backgroundMove3 {
			0% {
				transform: translateX(-300rpx);
			}

			100% {
				transform: translateX(-150rpx);
			}
		}

		@keyframes backgroundMove4 {
			0% {
				transform: translateX(-150rpx);
			}

			100% {
				transform: translateX(0rpx);
			}
		}

		@keyframes backgroundMove5 {
			0% {
				transform: translateX(-600rpx);
			}

			100% {
				transform: translateX(0rpx);
			}
		}

		@keyframes backgroundMove {
			0% {
				background-position: left center;
			}

			50% {
				background-position: center center;
			}

			100% {
				background-position: right center;
			}
		}

		@keyframes clodMove1 {
			0% {
				transform: translateX(0rpx);
			}

			100% {
				transform: translateX(-300rpx);
			}
		}

		@keyframes clodMove2 {
			0% {
				transform: translateX(-300rpx);
			}

			100% {
				transform: translateX(-500rpx);
			}
		}

		@keyframes clodMove3 {
			0% {
				transform: translateX(-500rpx);
			}

			100% {
				transform: translateX(-300rpx);
			}
		}

		@keyframes clodMove4 {
			0% {
				transform: translateX(-300rpx);
			}

			100% {
				transform: translateX(0rpx);
			}
		}

		.title-img {
			z-index: 100;
			position: absolute;
			top: 300rpx;
			left: 110rpx;
			width: 558rpx;
		}

		.clod-image {
			position: absolute;
			top: 198rpx;
			left: 4rpx;
			width: 416rpx;
			height: 409rpx;
			animation: codeMove 20s 1s linear infinite;
		}

		@keyframes codeMove {
			0% {
				top: 198rpx;
				left: 4rpx;
			}

			25% {
				top: 10rpx;
				left: 260rpx;
			}

			50% {
				top: 50rpx;
				left: 438rpx;
			}

			75% {
				top: -110rpx;
				left: 750rpx;
			}

			76% {
				opacity: 0;
				top: -210rpx;
				left: 750rpx;
			}

			77% {
				opacity: 0;
				top: 288rpx;
				left: -420rpx;
			}

			100% {
				opacity: 1;
				top: 198rpx;
				left: 4rpx;
			}
		}

		.studyBoard-container {
			position: absolute;
			left: 0;
			top: 700rpx;
			width: 100%;
			background-color: transparent;

			.studyBoard-banner-image {
				background-color: transparent;
				width: 100%;
			}
		}

		.play-title-img {
			margin: 54rpx 0 35rpx 0;
			width: 190rpx;
			height: 46rpx;
		}

	}
</style>